<script lang="ts" setup>
import { ref, reactive } from 'vue'
import userService from '@/api/userService'
import router from '@/router'
import { encryptedData } from '@/utils/crypto'
import appStore from '@/store'
import VueCookies from 'vue-cookies'
import { ElMessageBox, ElMessage } from 'element-plus'
import PassHeader from '@/components/PassHeader.vue'
import PrimTab from '@/components/PrimTab.vue'
import { User, TabMenuItem } from '@/types/public'

interface UserLogin extends User {
  captcha: string
  password: string
}

const cookie: any = VueCookies

let imgUrl = ref('')
const userLogin = reactive<UserLogin>({
  username: '',
  password: '',
  captcha: ''
})
const toRegister = () => {
  router.push({ name: 'Register' })
}
const goHomePage = async () => {
  appStore.userStore.isLogin = true
  router.push({ name: 'Homepage' })
}
const getCaptcha = async () => {
  let res = await userService.getCaptcha()
  imgUrl.value = 'data:image/jpg;base64,' + res.data.data
}
getCaptcha()

const tabMenu = reactive<Array<TabMenuItem>>([
  {
    id: 'user',
    text: '账号密码登录'
  },
  {
    id: 'phome',
    text: '手机验证码登录'
  }
])
const currentMenu = ref('user')
const handleUpdateCurrentMenu = (str: string) => {
  currentMenu.value = str
}
const login = async () => {
  let res = await userService.login(userLogin.username, encryptedData(userLogin.password), userLogin.captcha)

  if (res.status === 200) {
    if (res.data.code !== '0') {
      ElMessage({
        message: res.data.msg,
        type: 'error'
      })
    } else {
      ElMessage({
        message: '登录成功',
        type: 'success'
      })
      localStorage.setItem('userName', res.data.data.userName)
      appStore.userStore.updateName(res.data.data.userName)
      localStorage.setItem('role', res.data.data.role)
      appStore.userStore.updateUserType(res.data.data.role)
      localStorage.setItem('userId', res.data.data.userId)

      if (!res.data.data.authenticated) {
        if (!sessionStorage.getItem('AUTHEN')) {
          ElMessage.warning('未完成实名认证，部分功能无法使用！');
        }
        sessionStorage.setItem('AUTHEN', '0')
      } else {
        sessionStorage.setItem('AUTHEN', '1')
      }

      if (res.data.data.pwdChanged || res.data.data.role === 'user') {
        goHomePage()
      } else {
        router.push({ name: 'first' })
      }
    }
  }
}
const call = () => {
  ElMessageBox.alert('联系管理员XXX,电话:xxxxxxxxxxx', {
    confirmButtonText: 'OK',
    callback: () => { }
  })
}

const autoLogin = ref(false)
</script>
<template>
  <div class="mask"></div>
  <div id="login">
    <pass-header :color="'white'"></pass-header>
    <div class="content-box">
      <div class="login-title">欢迎登录 PRIM 转售综合管理平台</div>
      <div class="login-box">
        <div class="mid">
          <prim-tab :tab-menu="tabMenu" :current-menu="currentMenu" @handle-click="handleUpdateCurrentMenu"
            :login="true"></prim-tab>
          <div v-if="currentMenu === 'user'" style="display: contents">
            <el-form label-position="right" label-width="100px" style="width: 100%; margin-top: 30px">
              <el-form-item label-width="0">
                <el-input v-model="userLogin.username" style="height: 40px" class="w-50 m-2" placeholder="账号名"
                  @keypress.enter="login">
                  <template #prefix>
                    <svg-icon icon="username" class-name="icon"></svg-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label-width="0">
                <el-input v-model="userLogin.password" type="password" style="height: 40px" class="w-50 m-2"
                  placeholder="请输入密码" show-password @keypress.enter="login">
                  <template #prefix>
                    <svg-icon icon="password" class-name="icon"></svg-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label-width="0">
                <el-row :gutter="0" style="width: 100%">
                  <el-col :span="14">
                    <el-input v-model="userLogin.captcha" style="height: 40px" class="w-50 m-2" placeholder="请输入图片验证码"
                      @keypress.enter="login">
                      <template #prefix>
                        <svg-icon icon="chech" class-name="icon"></svg-icon>
                      </template>
                    </el-input>
                  </el-col>
                  <el-col :span="10">
                    <img :src="imgUrl" alt="" class="img" style="margin-left: 20px; height: 40px; width: 123px" />
                    <svg-icon icon="refash" class-name="icon-refash" style="cursor: pointer"
                      @click="getCaptcha"></svg-icon>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label-width="0">
                <div class="before-login">
                  <div>
                    <el-checkbox v-model="autoLogin" label="自动登录" size="large" />
                  </div>
                  <div>
                    <el-link type="primary" style="margin-right: 20px" @click="toRegister">注册</el-link>
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <button class="new" style="width: 100%; height: 40px; font-size: 16px" @click="login">登录</button>
          </div>
          <div v-else>手机号登录</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.icon {
  width: 20px;
  height: 20px;
}

.icon-refash {
  width: 40px;
  height: 40px;
}

.mask {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 1;
  background: linear-gradient(90deg, #0247ea 0%, rgba(0, 0, 0, 0) 100%);
}

#login {
  background-image: url('@/assets/images/loginBg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;

  :deep(.el-tabs__active-bar) {
    height: 3px;
  }

  .new {
    border: none;
    cursor: pointer;

    &:hover {
      border: none;
    }
  }

  .captcha {
    .img {
      width: 120px;
      margin-left: 20px;
      height: 40px;
    }

    :deep(.el-form-item__content) {
      flex-wrap: nowrap;
    }
  }

  .el-form-item {
    margin-bottom: 30px;
  }

  .content-box {
    width: 440px;
    height: 440px;
    margin: 0 auto;
    padding: 40px 50px;
    background-color: #fff;
    position: absolute;
    right: 120px;
    z-index: 10;

    .demo-tabs {
      margin-top: 15px;
    }

    .login-title {
      font-size: 20px;
      line-height: 20px;
      font-weight: bold;
      color: $text-color;
    }

    .login-box {
      .mid {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 30px;

        .before-login {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }

  .my-header {
    display: flex;
    justify-content: space-between;
  }
}
</style>
